<template>
  <div>
    <div class="switch">
      <div class="switch-left">
        <div
          class="box1"
          v-for="(v, index) in obj"
          :key="index"
          @click="fun(index)"
        >
          <img :src="v.src" />
          <span>{{ v.txt }}</span>
        </div>
      </div>
      <div class="switch-right">
        <div class="box1" v-for="(v, index) in obj1" :key="index">
          <img :src="v.url" />
          <span>{{ v.Txr }}</span>
        </div>
      </div>
    </div>
    <div class="bottom">
      <img
        src="https://pic.cdfgsanya.com/assets/upload/visual/fb5424f4976d43c6bcaaa1fa8c1e13de.png?1675593700887"
        alt=""
      />
    </div>
  </div>
</template>
 
 <script>
export default {
  data() {
    return {
      obj: [
        {
          src: "https://pic.cdfgsanya.com/assets/upload/visual/9a679dae844810590a7274d6cdd7ec46.png?1672733335540",
          txt: "护肤",
        },
        {
          src: "https://pic.cdfgsanya.com/assets/upload/visual/f1e623a756133f47263ec39abf473fc1.png?1672733343676",
          txt: "彩妆",
        },
        {
          src: "https://pic.cdfgsanya.com/assets/upload/visual/c095fd65aed3a246b2ac587bfcab5975.png?1672733415327",
          txt: "香水",
        },
        {
          src: "https://pic.cdfgsanya.com/assets/upload/visual/aa449d54726de45f799ea18d5295dfad.png?1672733423774",
          txt: "箱包",
        },
        {
          src: "https://pic.cdfgsanya.com/assets/upload/visual/5ea97f014427190797b7c32b80ad58de.png?1672733434773",
          txt: "腕表首饰",
        },
        {
          src: "https://pic.cdfgsanya.com/assets/upload/visual/f888b0284520fe3dcde5c65d5e6e1e6f.png?1672733339350",
          txt: "酒水",
        },
        {
          src: "https://pic.cdfgsanya.com/assets/upload/visual/9b68b97488d7baaf2d0b5d229f02e410.png?1672733488317",
          txt: "手机数码",
        },
        {
          src: "https://pic.cdfgsanya.com/assets/upload/visual/9b68b97488d7baaf2d0b5d229f02e410.png?1672733488317",
          txt: "点击领劵",
        },
        {
          src: "https://pic.cdfgsanya.com/assets/upload/visual/9be34199e023c068ecf41d1881569e5d.png?1672733419876",
          txt: "个护家居",
        },
        {
          src: "https://pic.cdfgsanya.com/assets/upload/visual/f94db7cc8c5b7aec57742744e6e562f4.png?1672733427118",
          txt: "国潮时尚",
        },
      ],
      obj1: [
        {
          url: "https://pic.cdfgsanya.com/assets/upload/visual/e84467ec7ad2a0a0139beb114a1f0cc2.png?1672733443108",
          Txr: "服饰鞋靴",
        },
        {
          url: "https://pic.cdfgsanya.com/assets/upload/visual/e84467ec7ad2a0a0139beb114a1f0cc2.png?1672733443108",
          Txr: "腕表首饰",
        },
        {
          url: "https://pic.cdfgsanya.com/assets/upload/visual/46d4556a8ca0464ede27fb5301a3dd1a.png?1672733438131",
          Txr: "食品",
        },
        {
          url: "https://pic.cdfgsanya.com/assets/upload/visual/806c8b30caf1b9702f185810bc5a02df.png?1672733447498",
          Txr: "全部分类",
        },
        {
          url: "https://pic.cdfgsanya.com/assets/upload/visual/8ffc397cfd6ecb5239a02e8a218b5e7c.png?1672733459284",
          Txr: "母婴",
        },
        {
          url: "https://pic.cdfgsanya.com/assets/upload/visual/8ffc397cfd6ecb5239a02e8a218b5e7c.png?1672733459284",
          Txr: "眼镜文具",
        },
      ],
    };
  },
  methods: {
    fun(index) {
      if (index == 0) {
        this.$router.push("/hufu");
      }
    },
  },
};
</script>
 
 <style scoped>
.switch {
  width: 100vw;
  height: 42.66666667vw;
  /* margin: auto;
     margin-top: 16vw; */
  display: flex;
  overflow: auto;
  background: #f8f6f6;
}
.switch .switch-left {
  width: 100%;
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
}
.switch .switch-right {
  width: 60%;
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
}
.switch .switch-left .box1 {
  width: 20%;
  height: 50%;
  /* background: yellow; */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.switch .switch-right .box1 {
  width: 30%;
  height: 50%;
  /* background: yellow; */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.switch .box1 img {
  width: 10.66666667vw;
  margin-bottom: 2.66666667vw;
}
.switch .box1 span {
  font-size: 3.2vw;
  color: #666666;
}
.bottom {
  background: #f8f6f6;
}
.bottom img {
  width: 355px;
  height: 133px;
  border-radius: 10px;
  margin: 10px;
}
</style>